<template>
  <div ref="chart" style="width: 98%;min-width:360px ;height: 300px;"></div>
</template>
<script>
  import dashboardAPI from '@/api/dashboard/dashboard'
  import {
    EmptyChart
  } from '@/views/components/chart'
  export default {
    name: 'DepartmentCountChart',
    mixins: [EmptyChart],
    data() {
      const vm = this
      return {
        chartOption: {
          title: {
            text: vm.$t('chart.DepartmentAndUser'),
            left: 'center'
          },
          tooltip: {
            show: true
          },
        },
        deptTypes: [vm.$t('Department'), vm.$t('School'), vm.$t('ClassRoom')],
        list: []
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      queryData() {
        const vm = this
        dashboardAPI.departmentCount().then(res => {
          vm.list = vm.list.concat(res.data.map(item => {
            item.name = vm.deptTypes[item.name]
            return item
          }))
          vm.updateChart()
        })
        dashboardAPI.userCount().then(res => {
          vm.list.push({
            name: vm.$t('User'),
            value: res.data
          })
          vm.updateChart()
        })
      },
      createOption() {
        const gaugeData = []
        const positions = [
          [
            [0, -10]
          ],
          [
            [0, -45],
            [0, 15]
          ],
          [
            [-35, -35],
            [35, -35],
            [0, 35],
          ],
          [
            [-35, -35],
            [35, -35],
            [-35, 25],
            [35, 25],
          ],
        ]
        const list = this.list.filter(item => item.name)
        const position = positions[list.length - 1]
        for (var i = 0; i < list.length && i < 4; i++) {
          const item = list[i]
          const {
            value,
            name
          } = item
          const left = position[i][0]
          const top = position[i][1]
          gaugeData.push({
            name,
            value,
            title: {
              offsetCenter: [left + '%', top + '%']
            },
            detail: {
              valueAnimation: true,
              offsetCenter: [left + '%', (top + 20) + '%']
            }
          })
        }
        return {
          series: [{
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: '#464646'
              }
            },
            axisLine: {
              lineStyle: {
                width: 40
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: gaugeData,
            title: {
              fontSize: 14
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 14,
              color: 'inherit',
              borderColor: 'inherit',
              borderRadius: 20,
              borderWidth: 1
            }
          }]
        }
      }
    }
  }

</script>
